<template>
  <div class="content-box">
    <div>
      <el-row>
        <el-col :span="12">
          <span>需要操作的随访表格：</span>
          <el-select v-model="table" placeholder="请选择随访表格" @change="change">
            <el-option v-for="item in tables" :key="item.key" :label="item.label" :value="item.key">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <div>
      <div class="item-list" v-for="(item, index) in data">
        <div class="item">
          <div>名称:<el-input type="text" v-model="item.name" class="mr10" @change="change2Field(item)"/></div>
          <div>字段:<el-input type="text" v-model="item.field" class="mr10" /></div>
          <div>值:<el-input type="text" v-model="item.value" class="mr10" /></div>
          <div>长度:
            <el-select v-model="item.valueLength" placeholder="值长度">
              <el-option v-for="len in valueLength" :key="len" :label="len" :value="len">
              </el-option>
            </el-select>
          </div>
          <div>范围:<el-input type="text" v-model="item.datarange" class="mr10" /></div>
          <div>类型:
            <el-select v-model="item.type" placeholder="显示类型" class="mr10">
              <el-option v-for="ty in types" :key="ty" :label="ty" :value="ty">
              </el-option>
            </el-select>
          </div>
          <div>值类型:
            <el-select v-model="item.valueType" placeholder="值类型" class="mr10">
              <el-option v-for="vt in valueTypes" :key="vt" :label="vt" :value="vt">
              </el-option>
            </el-select>
          </div>
          <div>单位:
            <el-select v-model="item.unit" placeholder="单位" class="mr10">
              <el-option v-for="un in unit" :key="un" :label="un" :value="un">
              </el-option>
            </el-select>
          </div>
          <div>样式:
            <el-select v-model="item.style" placeholder="样式" class="mr10">
              <el-option v-for="st in style" :key="st" :label="st" :value="st">
              </el-option>
            </el-select>
          </div>
          <div>几列:
            <el-select v-model="item.col" placeholder="样式" class="mr10">
              <el-option v-for="cl in cols" :key="cl" :label="cl" :value="cl">
              </el-option>
            </el-select>
          </div>
          <div style="width: 50px;flex:none;display: block;"><el-button type="button" @click="addChild(index)">+</el-button></div>
          <div style="width: 50px;flex:none;display: block;"><el-button type="button" @click="delChild(index,-1)" style="color:red;">-</el-button></div>
        </div>
        <div class="item-list" style="margin-left: 50px;" v-for="(it, i) in item.children">
          <div class="item">
            <div>名称:<el-input type="text" v-model="it.name" class="mr10" @change="change2Field(it)" /></div>
            <div>字段:<el-input type="text" v-model="it.field" class="mr10" /></div>
            <div>值:<el-input type="text" v-model="it.value" class="mr10" /></div>
            <div>长度:
              <el-select v-model="it.valueLength" placeholder="值长度">
                <el-option v-for="len in valueLength" :key="len" :label="len" :value="len">
                </el-option>
              </el-select>
            </div>
            <div>范围:<el-input type="text" v-model="it.datarange" class="mr10" /></div>
            <div>类型:
              <el-select v-model="it.type" placeholder="显示类型" class="mr10">
                <el-option v-for="ty in types" :key="ty" :label="ty" :value="ty">
                </el-option>
              </el-select>
            </div>
            <div>值类型:
              <el-select v-model="it.valueType" placeholder="值类型" class="mr10">
                <el-option v-for="vt in valueTypes" :key="vt" :label="vt" :value="vt">
                </el-option>
              </el-select>
            </div>
            <div>单位:
              <el-select v-model="it.unit" placeholder="单位" class="mr10">
                <el-option v-for="un in unit" :key="un" :label="un" :value="un">
                </el-option>
              </el-select>
            </div>
            <div>样式:
              <el-select v-model="it.style" placeholder="样式" class="mr10">
                <el-option v-for="st in style" :key="st" :label="st" :value="st">
                </el-option>
              </el-select>
            </div>
            <div>几列:
              <el-select v-model="it.col" placeholder="样式" class="mr10">
                <el-option v-for="cl in cols" :key="cl" :label="cl" :value="cl">
                </el-option>
              </el-select>
            </div>
            <div style="width: 50px;flex:none;display: block;"><el-button type="button" @click="delChild(i,index)" style="color:red;" >-</el-button></div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <el-button type="primary" @click="addChild(-1)">新增一行</el-button>
    </div>
    <div>
      <el-button type="primary" @click="update">保存数据</el-button>
    </div>
    <div>
      <el-button type="primary" @click="parseJSON">解析成json</el-button>
    </div>
    <div>
      <el-input type="textarea" v-model="jsonData" placeholder="解析后的json字符串" rows="20" />
    </div>
  </div>
</template>

<script>
//elijahguufr@outlook.com elijahguufr@outlook.com
//elijahguufr@outlook.com 
//TFr54c33 TFr54c33 TFr54c33
//QL  TFr54c33  CKn88f73  CKn88f73  CKn88f73 CKn88f73
import { pinyin } from "pinyin-pro";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      tables: [
        { key: 'aio_health_info', label: '健康体检表' },
        { key: 'aio_newborn_info', label: '新生儿家庭访视记录表' }
      ],
      types: ['input', 'select', 'checkbox', 'dialog', 'radio','container'],
      valueTypes: ['string','int', 'decimals',''],
      valueLength: ['','1','2','3','4','5','6','8','10', '20', '30'],
      style: ['default', 'tooth'],
      unit: ['','cm', 'kg', '岁', "mmol/L", 'μmol/L', '%', 'kcal', 'kg/㎡', 'L', 'L/s', '°C', 'mmHg', 'bpm','分钟','年','月','日','次','ml','ml/min'],
      cols: ["1", "2", "3"],
      table: 'aio_health_info',
      data: [],
      jsonData:'',
    }
  },
  created() {
    window.electronAPI.receive("update", (msg) => {
      this.$message({
        message: '更新信息成功',
        type: 'success'
      });
    });
    window.electronAPI.receive("insert", (msg) => {
      this.$message({
        message: '插入信息成功',
        type: 'success'
      });
    });
    window.electronAPI.receive("query", (data) => {
      //console.log(JSON.stringify(data));
      //console.log(data.length)
      if (data && data.length > 0) {
        this.data = JSON.parse(data[0]['value']);
      } else {
        this.insert();
      }
    });
    this.query();
  },
  methods: {
    change(e) {
     //// console.log(e);
      this.table = e;
      this.query();
    },
    change2Field(e){
      if( !e || !e.name ) return;
      let  pinyinResult = pinyin(e.name, { toneType: "none" }); 
      if(pinyinResult) pinyinResult = pinyinResult.replace(/\s+/g, '');
      e.field = pinyinResult;
    },
    ///新增行
    addChild(parentIndex) {
      let child = {
        "name":'',
        "field": "",
        "value": "",
        "valueLength": "",
        "datarange": "",
        "type": "input",
        "valueType": "string",
        "unit": "",
        "style": "default",
        "col": "1",
        "children": []
      };
      //二级
      if (this.data && this.data.length > 0 && parentIndex >= 0 && parentIndex < this.data.length) {
        let item = this.data[parentIndex];
        if (item.children) {
          item.children.push(child);
        } else {
          item.children = [child];
        }
        //一级
      } else {
        this.data.push(child);
      }
    },
    delChild(index,parentIndex){
      if( parentIndex == -1 ){
        this.data.splice(index,1);
      }else{
        this.data[parentIndex].children.splice(index,1);
      }
    },
    async insert() {
      window.electronAPI.send('insert', { value: JSON.stringify(this.data), key: this.table });
    },
    async query() {
      window.electronAPI.send('query', this.table);
    },
    async update() {
      //console.log(this.data);
      window.electronAPI.send('update', { value: JSON.stringify(this.data), key: this.table });
    },
    parseJSON(){
      //console.log(JSON.stringify(this.data));
      //this.data 转json 
      console.log(this.jsonData);
    }
    // query2(){
    //   window.electronAPI.sendSynchronization('query2', 'bai').then((data) => {
    //     console.log('data='+data);
    //     console.log('data='+JSON.stringify(data));
    //   });
    // }
  }

}
</script>
<style scoped lang="less">
* {
  padding: 0px;
  margin: 0;
}

html {

  overflow-y: scroll;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

blockquote,
body,
dd,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
img,
label,
li,
ol,
p,
strong,
table,
td,
th,
ul {
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}

li,
ol,
ul {
  list-style: none
}

button,
input {
  font-family: microsoft yahei, arial, PingFang SC, helvetica, sans-serif;
  margin: 0;
  font-size: 12px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

body {
  font-family: microsoft yahei, arial, PingFang SC, helvetica, sans-serif;
  margin: 0;
  color: #888;
  display: block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #eee;
  width: 100%;
  box-sizing: border-box;
}

.content-box {
  background-color: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: left;
  align-items: left;
  text-align: left;
}

.content-box>div {
  text-align: left;
  display: flex;
  margin-top: 5px;
  flex-direction: column;
}

.item-list {
  display: flex;
  margin-top: 5px;
  flex-direction: column;
}

.item-list .item {
  display: flex;
  margin-top: 5px;
  flex-direction: row;
  margin-right: 10px;
}

.mr10 {
  margin-right: 10px;
}

.item div {
  font-size: 14px;
  font-weight: 200;
  display: flex;
  flex: 1.0;
  align-items: center;
}
</style>
